<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程设计</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>

    <!--流程设计    -->
    <link rel="stylesheet" href="/admin/html/module/yumenyoutian/process/index.css">
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/process/index.umd.min.js"></script>



</head>
<body>

    <div id="app">
        <template>
            <super-flow></super-flow>
        </template>
    </div>


    <script>

        const drawerType = {
            node: 0,
            link: 1,
        };

        var vm = new Vue({
           el:"#app",
           data(){
               return {
                   bdOptions: [],
                   sjoptions:[],
                   userOptions:[],
                   drawerType,
                   drawerConf: {
                       title: "",
                       visible: false,
                       type: null,
                       info: null,
                       open: (type, info) => {
                           const conf = this.drawerConf;
                           conf.visible = true;
                           conf.type = type;
                           conf.info = info;
                           if (conf.type === drawerType.node) {
                               conf.title = "节点";
                               if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields();
                               this.$set(this.nodeSetting, "jdmc", info.meta.jdmc);
                               this.$set(this.nodeSetting, "desc", info.meta.desc);
                           } else {
                               conf.title = "连线";
                               if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields();
                               this.$set(
                                   this.linkSetting,
                                   "desc",
                                   info.meta ? info.meta.desc : ""
                               );
                           }
                       },
                       cancel: () => {
                           this.drawerConf.visible = false;
                           if (this.drawerConf.type === drawerType.node) {
                               this.$refs.nodeSetting.clearValidate();
                           } else {
                               this.$refs.linkSetting.clearValidate();
                           }
                       },
                   },
                   linkSetting: {
                       desc: "",
                   },
                   //   节点信息配置
                   nodeSetting: {
                       jdmc: "",
                       userList: [],
                       bdbd: "",
                       bdsj: "",
                       spbtg: "",
                       sxh: 0,
                   },

                   nodeList: [],
                   linkList: [],

                   graphMenuList: [
                       [
                           {
                               label: "审批节点",
                               disable: false,
                               selected: (graph, coordinate) => {
                                   graph.addNode({
                                       width: 250,
                                       height: 116,
                                       coordinate: coordinate,
                                       meta: {
                                           prop: "approval",
                                           jdmc: "审批节点",
                                           userList: [],
                                       },
                                   });
                               },
                           },
                       ],
                       [
                           {
                               label: "打印数据",
                               selected: (graph, coordinate) => {
                                   console.log(JSON.stringify(graph.toJSON(), null, 2));
                               },
                           },
                           {
                               label: "全选",
                               selected: (graph, coordinate) => {
                                   graph.selectAll();
                               },
                           },
                       ],
                   ],
                   nodeMenuList: [
                       [
                           {
                               label: "删除",
                               disable: false,
                               hidden(node) {
                                   return node.meta.prop === "start";
                               },
                               selected(node, coordinate) {
                                   node.remove();
                               },
                           },
                       ],
                       [
                           {
                               label: "编辑",
                               selected: (node, coordinate) => {
                                   console.log(node.meta);
                                   this.drawerConf.open(drawerType.node, node);
                                   this.nodeSetting.jdmc = node.meta.jdmc;
                                   this.nodeSetting.bdbd = node.meta.bdbd;
                                   this.nodeSetting.bdsj = node.meta.bdsj;
                                   this.nodeSetting.spbtg = node.meta.spbtg;
                                   this.nodeSetting.userList = node.meta.userList;
                               },
                           },
                       ],
                   ],
                   linkMenuList: [
                       [
                           {
                               label: "删除",
                               disable: false,
                               selected: (link, coordinate) => {
                                   link.remove();
                               },
                           },
                       ],
                   ],
               };
           },
            mounted() {
                import SuperFlow from 'vue-super-flow'
                this.$nextTick(() => {
                    this.$el.scrollBy({
                        left: (this.$el.scrollWidth - this.$el.clientWidth) / 2,
                        top: (this.$el.scrollHeight - this.$el.clientHeight) / 2,
                    });
                });
            },
           created(){
               this.getbdList();
               this.getProcessOptions();
               this.getProcessUser();
           },
            methods: {
                //   获取已经保存的流程数据
                async getOldProcess(newid){
                    const params = {
                        id: newid
                    }
                    const res = await api.queryBody(
                        '/admin/api/pmc/ProcessManagementController/getForProcessDesign',
                        params
                    )
                    if(res.code==1){
                        let proj = JSON.parse(res.data)
                        this.nodeList = proj.nodeList
                        this.linkList = proj.linkList
                        console.log(JSON.parse(res.data))
                    }else{
                        this.$message.error(res.msg)
                    }
                },
                //   保存流程
                async saveProcess() {
                    // 获取到当前的流程json对象
                    //   console.log(JSON.stringify(this.$refs.superFlow.toJSON(), null, 2));
                    const params = this.$refs.superFlow.toJSON()
                    params.lcid = this.lcid
                    const res = await api.postBody(
                        '/admin/api/pmc/ProcessManagementController/processDesign',
                        params
                    )
                    if(res.code==1){
                        this.$message.success(res.msg)
                    }else{
                        this.$message.error(res.msg)
                    }

                },
                // 获取流程管理审批类别下拉框数据
                async getProcessOptions() {
                    const res = await api.postBody(
                        "/admin/api/pmc/ProcessManagementController/eventListOptions"
                    );
                    if (res.code == 1) {
                        this.sjoptions = res.data
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 获取流程审批人下拉框数据
                async getProcessUser(){
                    const res = await api.postBody('/admin/api/pmc/ProcessManagementController/approverDropdownBox')
                    if(res.code==1){
                        // console.log(res)
                        this.userOptions = res.data
                    }else{
                        this.$message.error(res.msg)
                    }
                },
                // 获取绑定表单下拉框
                async getbdList(){
                    const res = await api.postBody('/admin/api/pmc/ProcessManagementController/listFormEntry')
                    if(res.code==1){
                        console.log(res)
                        this.bdOptions = res.data;
                    }else{
                        this.$message.error(res.msg)
                    }

                },
                // 连线控制
                // enterIntercept(formNode, toNode, graph) {
                //   const formType = formNode.meta.prop;
                //   switch (toNode.meta.prop) {
                //     case "start":
                //       return false;
                //     case "approval":
                //       return ["start", "approval", "condition", "cc"].includes(formType);
                //     case "condition":
                //       return ["start", "approval", "condition", "cc"].includes(formType);
                //     case "end":
                //       return ["approval", "cc"].includes(formType);
                //     default:
                //       return true;
                //   }
                // },
                outputIntercept(node, graph) {
                    return !(node.meta.prop === "end");
                },
                linkDesc(link) {
                    return link.meta ? link.meta.desc : "";
                },
                settingSubmit() {
                    const conf = this.drawerConf;
                    if (this.drawerConf.type === drawerType.node) {
                        if (!conf.info.meta) conf.info.meta = {};
                        Object.keys(this.nodeSetting).forEach((key) => {
                            this.$set(conf.info.meta, key, this.nodeSetting[key]);
                        });
                        this.$refs.nodeSetting.resetFields();
                    } else {
                        if (!conf.info.meta) conf.info.meta = {};
                        Object.keys(this.linkSetting).forEach((key) => {
                            this.$set(conf.info.meta, key, this.linkSetting[key]);
                        });
                        this.$refs.linkSetting.resetFields();
                    }
                    conf.visible = false;
                },
                // 关闭窗口
                handleClose() {
                    // 将设计好的流程数据清空
                    this.nodeList = [];
                    this.linkList = [];

                    this.remoteClose();
                },
            },
        });
    </script>
</body>
</html>